<template>
  <div class="banner-test-page">
    <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold mb-8 tracking-tight animate-fade-in-up">轮播图最终验证</h1>
    
    <!-- 方法1: Element Plus轮播组件 -->
    <section class="test-section">
      <h2 class="section-title">方法1: Element Plus轮播组件</h2>
      <div class="carousel-wrapper">
        <el-carousel height="400px" :interval="3000">
          <el-carousel-item>
            <div class="carousel-item">
              <img :src="img1" alt="图片1" class="carousel-image" />
              <div class="carousel-caption">图片1 - 使用import导入</div>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="carousel-item">
              <img :src="img2" alt="图片2" class="carousel-image" />
              <div class="carousel-caption">图片2 - 使用import导入</div>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="carousel-item">
              <img :src="img3" alt="图片3" class="carousel-image" />
              <div class="carousel-caption">图片3 - 使用import导入</div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </section>
    
    <!-- 方法2: 简单原生图片展示 -->
    <section class="test-section">
      <h2 class="section-title">方法2: 简单原生图片展示</h2>
      <div class="image-grid">
        <div class="image-item">
          <img :src="img1" alt="图片1-原生" class="test-image" />
          <p class="text-text-secondary mt-2">图片1 - 直接展示</p>
        </div>
        <div class="image-item">
          <img :src="img2" alt="图片2-原生" class="test-image" />
          <p class="text-text-secondary mt-2">图片2 - 直接展示</p>
        </div>
        <div class="image-item">
          <img :src="img3" alt="图片3-原生" class="test-image" />
          <p class="text-text-secondary mt-2">图片3 - 直接展示</p>
        </div>
      </div>
    </section>
    
    <!-- 调试信息 -->
    <section class="debug-section">
      <h2 class="section-title">调试信息</h2>
      <div class="debug-info">
        <p><strong>图片路径:</strong></p>
        <pre>{{ imageInfo }}</pre>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElCarousel, ElCarouselItem } from 'element-plus'
import img1 from '@/assets/img/1.png'
import img2 from '@/assets/img/2.jpg'
import img3 from '@/assets/img/3.jpg'

const imageInfo = ref('')

onMounted(() => {
  // 收集图片信息用于调试
  imageInfo.value = JSON.stringify({
    img1: String(img1),
    img2: String(img2),
    img3: String(img3),
    img1Type: typeof img1,
    img2Type: typeof img2,
    img3Type: typeof img3
  }, null, 2)
  
  // 打印到控制台以便查看
  console.log('轮播图验证 - 图片路径信息:', {
    img1,
    img2,
    img3
  })
})
</script>

<style scoped>
.banner-test-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}



.test-section {
  margin-bottom: 4rem;
  padding: 2rem;
  background-color: #f9fafb;
  border-radius: 8px;
}

.section-title {
  margin-bottom: 1.5rem;
  color: #374151;
  font-size: 1.5rem;
}

.carousel-wrapper {
  width: 100%;
}

.carousel-item {
  position: relative;
  height: 400px;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 1rem;
  text-align: center;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.image-item {
  text-align: center;
}

.test-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.debug-section {
  background-color: #f3f4f6;
  padding: 2rem;
  border-radius: 8px;
}

.debug-info {
  background-color: #1f2937;
  color: #e5e7eb;
  padding: 1.5rem;
  border-radius: 4px;
  font-family: monospace;
  overflow-x: auto;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>